import React from "react";
import './css/addAddress.css'
import { LeftOutline, DeleteOutline } from 'antd-mobile-icons'
import { useNavigate, Outlet } from 'react-router-dom'
import { Tabs, Switch, Card } from 'antd-mobile'
import { AddressBookFill } from 'antd-mobile-icons'

const addAddress = () => {
    let navigate = useNavigate()
    return (
        <>
            <div className="addAddress_div">
                <div className="addAddress_top_div">
                    <div >
                        <LeftOutline onClick={() => navigate('/address')} fontSize={20} className="addAddress_left_icon" />
                        <p>添加新地址</p>
                    </div>
                </div>
                <div className="addAddress_content_div">
                    <div className="addAddress_div1">
                        <Card className="addAddress_Card_div1">
                            <div className="addAddress_big_div">
                                <div className="addAddress_Card_div1_div1">
                                    <div className="Card_div_div1">
                                        <span>姓名</span>
                                        <input type="text" placeholder="收货人姓名" />
                                    </div>
                                    <div className="Card_div_div2">
                                        <span>电话</span>
                                        <input type="tel" placeholder="收货人电话" />
                                    </div>
                                </div>
                                <div className="addAddress_Card_div1_div2">
                                    <AddressBookFill fontSize={40} />
                                </div>
                            </div>
                        </Card>
                    </div>
                    <div className="addAddress_div2">
                        <Card className="addAddress_Card_div2">
                            <div className="addAddress_big_div1">
                                <div className="divv1">
                                    <input type="text" placeholder="所在地区 (省、市、区)" />
                                </div>
                                <div className="divv2">
                                    <input type="text" placeholder="详细地址 (街道、门牌号等)" />

                                </div>
                            </div>
                        </Card>
                    </div>

                    <Card className="addAddress_Card_div3">
                        <div className="addAddress_div3">
                            <div>
                                <p>设为默认地址</p>
                            </div>
                            <div>
                                <Switch
                                    style={{
                                        '--checked-color': '#99cc34',
                                        '--height': '2.8rem',
                                        '--width': '5.5rem',
                                    }}
                                />
                            </div>
                        </div>
                    </Card>
                    <div className="addAddress_btn_div">
                        <button className="addAddress_btn">保存</button>
                    </div>
                </div>
            </div>
        </>
    )
}
export default addAddress